// 搜索内容组件
<template>
  <div>
    <div class="box">
      <div class="title">
        <div class="title-left">
          <i
            ><el-icon>
              <Search /> </el-icon
          ></i>
          <span>筛选搜索</span>
        </div>
        <div class="title-right">
          <button @click="reSet">重置</button>
          <button @click="Serach">查询搜索</button>
        </div>
      </div>
      <div class="tanxin">
        <div class="val" v-for="(item, index) in array" :key="item.title">
          <span>{{ item.title }}:&emsp;</span>
          <input
            v-if="!item.timeend"
            v-model="value[index]"
            type="text"
            :list="item.havelist ? 'appNamelist' : ''"
            :placeholder="item.placeholder"
            @input="inputVal"
          />
          <datalist v-if="item.appNameList" id="appNamelist">
            <option v-for="i in item.appNameList" :key="i">{{ i }}</option>
          </datalist>
          <el-date-picker
            v-if="item.timeend"
            v-model="value[index]"
            type="date"
            placeholder="请选择时间"
            size="default"
          />
          &emsp;
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
defineProps<{
  array: Array<{
    title: string;
    placeholder: string;
    havelist: boolean;
    [type: string]: any;
  }>;
}>();
let value = ref([]); // 绑定的数据 是数组

let inputVal = () => {
  console.log("输入了内容");
  console.log(value);
};
let reSet = () => {
  console.log("重置按钮");
  for (let i = 0; i < value.value.length; i++) {
    value.value[i] = "";
  }
};
let Serach = () => {
  console.log("搜索按钮,子传父级内容");
};
</script>

<style lang="scss" scoped>
.box {
  margin: 10px auto 30px;
  background-color: white;
  box-shadow: 1px 2px 3px #888;
  padding: 30px 20px;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .title-left {
      display: flex;
      align-items: center;

      span {
        margin-left: 2px;
      }
    }

    .title-right {
      button {
        margin: 0 5px;
        padding: 6px 12px;
        border-radius: 3px;
        border: 1px solid #999;
        color: #333;
        cursor: pointer;

        &:nth-of-type(1):hover {
          color: rgb(64, 158, 255);
          border: 1px solid rgb(64, 158, 255);
        }

        &:nth-of-type(2) {
          background-color: rgb(64, 158, 255);
          color: white;
          border: 1px solid white;
        }
      }
    }
  }

  .tanxin {
    display: flex;
    padding-top: 20px;
    padding-left: 40px;
    justify-content: flex-start;

    .val {
      font-size: 14px;
      color: #4a4a4a;
      display: flex;
      align-items: center;

      input {
        font-size: 14px;
        padding: 7px;
        text-indent: 0.5em;
        width: 200px;
        outline: none;
        border: 1px solid #d1d1d1;
        color: black;
        border-radius: 3px;
      }
    }
  }
}
</style>
